<template>
	<view class="newscontent">
		<view class="box">
			<view class="box-item" v-for="(item,index) in icon_list" :key="item.id">
				<view class="icon">
					<image class="icon-img" :src="ip+'/img/'+item.src" mode=""></image>
				</view>
				<view class="text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="newslist">
			<view class="news-item" v-for="(item,index) in conversations" :key="item.id">
				<view class="author-img-box" @click.stop="goToTalk(index)">
					<view class="author-img" @click="test">
						<image class="img" :src="ip+'/img/'+item.data.avatar" mode=""></image>
					</view>
					<view class="text">
						<view class="top">
							<view class="name">{{item.data.name}}</view>
							<view class="date">{{item.lastMessage.timestamp | timemap}}</view>
						</view>
						<view class="bottom">
							<view class="message">{{item.lastMessage.payload.text}}</view>
							<view class="unread" v-if="item.unread != 0">{{item.unread}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-desc" v-if="conversations.length == 0">
				无更多消息
			</view>
		</view>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	import IMService from "../lib/imservice.js";
	
	let that;
	export default {
		name: "NewsContent",
		data() {
			return {
				ip: t.o,
				unreadTotal: 0,
				conversations: [],
				action: {
					conversation: null,
					show: false
				},
				id: '',
				icon_list: [{
						id: 1,
						src: 'comment.jpg',
						text: '评论'
					},
					{
						id: 2,
						src: 'love.jpg',
						text: '点赞'
					},
					{
						id: 3,
						src: 'dong.jpg',
						text: '随拍'
					},
					{
						id: 4,
						src: 'fans.jpg',
						text: '粉丝'
					},
				],
			}
		},
		filters: {
			timemap(value) {
				return that.formatDate(value);
			}
		},
		created() {
			that = this;
			let currentUser = uni.getStorageSync('user')[0];
			if (this.goEasy.getConnectionStatus() == 'disconnected') {
				getApp().globalData.imService = new IMService(this.goEasy, this.GoEasy);
				getApp().globalData.imService.connect(currentUser);
			}
			uni.showLoading();
			//监听会话列表变化
			let self = this;
			this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
				self.renderConversations(content);
			});
			// 加载会话列表
			this.goEasy.im.latestConversations({
				onSuccess: function(result) {
					let content = result.content;
					self.renderConversations(content);
					// //news_list数据再封装
					// self.getNewsListData();

					uni.hideLoading();
				},
				onFailed: function(error) {
					//获取失败
					uni.hideLoading()
					console.log("失败获取最新会话列表");
				}
			});
		},
		methods: {
			renderConversations(content) {
				this.conversations = content.conversations || [];
				this.conversations.forEach(item => {
					let lasttime = this.formatDate(item.lastMessage.timestamp);
					console.log(lasttime)
					item.lasttime = lasttime;
				})
				console.log(this.conversations);
			},
			goToTalk(index) {
				const id = this.conversations[index].userId;
				uni.navigateTo({
					url: '/pagesA/chat/chat?id=' + id
				})
			},
			test() {
				console.log(this.conversations);
			}
		}
	}
</script>

<style lang="scss">
	.newscontent {
		width: 100%;
		color: #FFFFFF;
		margin-top: 20px;

		.box {
			display: flex;
			justify-content: space-between;
			padding: 20px;

			.box-item {
				.icon {
					.icon-img {
						width: 40px;
						height: 40px;
						border-radius: 5px;
					}
				}

				.text {
					font-size: 13px;
					margin-top: 5px;
					text-align: center;
				}
			}
		}

		.newslist {
			margin-top: 20px;
			padding: 0 20px;
			position: relative;
			overflow: hidden;


			.news-item {
				margin: 10px 0;
				position: relative;

				.author-img-box {
					display: flex;

					.author-img {
						.img {
							width: 45px;
							height: 45px;
							border-radius: 50%;
						}
					}

					.text {
						flex: 1;
						margin-left: 15px;

						.top {
							display: flex;
							justify-content: space-between;

							.name {
								font-size: 16px;
								height: 25px;
								line-height: 25px;
							}

							.date {
								font-size: 13px;
								line-height: 25px;
								color: #888888;

							}
						}

						.bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;

							.unread {
								position: absolute;
								right: 0;
								border-radius: 50%;
								background-color: #fe2c55;
								color: #FFFFFF;
								display: flex;
								align-items: center;
							}
						}

						.message {
							font-size: 13px;
							line-height: 20px;
							color: #888888;
							width: 80%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.unread {
							right: 0;
							top: 0;
							padding: 0 5px;
							box-sizing: border-box;
							height: 20px;
							border-radius: 20px;
							background-color: #f4ea2a;
							color: #000000;
							font-size: 14px;
							text-align: center;
						}

					}
				}
			}

			.no-desc {
				margin-top: 10px;
				width: 100%;
				height: 50px;
				line-height: 50px;
				color: #888888;
				font-size: 14px;
				text-align: center;
			}
		}
	}
</style>
